<template>
	<view class="content">
		<canvas canvas-id="myCanvas" :style="`width: ${width}px;height: ${width}px;background-color: transparent;`"
			@tap="handleCanvasTap"></canvas>
	</view>
</template>

<script>
	import circles from './circle.js';
	import min_circles from './min_circle.js';
	import middle_circles from './middle_circle.js';
	let that;
	export default {
		name: "qx-rotate-2d",
		data() {
			return {
				circles: [
					// ...circles,
					// ...min_circles,
					// ...middle_circles
				]
			};
		},
		props: {
			width: {
				type: Number,
				default: uni.upx2px(650)
			},
			height: {
				type: Number,
				default: uni.upx2px(650)
			},
			backgroundColor: {
				type: String,
				default: 'aliceblue'
			}
		},
		created() {
			that = this;
			this.circles = [
				...circles(this.width),
				...min_circles(this.width),
				...middle_circles(this.width)
			]

			this.init()
			this.startRotation();
		},
		methods: {
			init() {
				const ctx = uni.createCanvasContext('myCanvas')
				this.drawCircles(ctx);
				ctx.draw()
			},
			drawCircles(ctx) {
				ctx.clearRect(0, 0, this.width, this.height); // 清除画布
				ctx.setFillStyle('rgba(0,0,0,0)');
				ctx.fillRect(0, 0, this.width, this.height);

				const centerX = this.width / 2;
				const centerY = this.width / 2;

				this.circles.forEach(circle => {
					const x = centerX + circle.orbitRadius * Math.cos(circle.angle);
					const y = centerY + circle.orbitRadius * Math.sin(circle.angle);

					// const x = circle.x;
					// const y = circle.y;

					// const grd = ctx.createCircularGradient(x, y,circle.orbitRadius);
					const grd = ctx.createLinearGradient(x - circle.radius, y - circle.radius, x + circle.radius,
						y + circle.radius);
					grd.addColorStop(0, circle.color1)
					grd.addColorStop(1, circle.color2)

					// background: linear-gradient( 90deg, #C829F3 0%, #4516CA 100%);

					// 绘制圆
					ctx.beginPath();
					ctx.arc(x, y, circle.radius, 0, 2 * Math.PI);
					ctx.setFillStyle(grd);

					ctx.fill();

					if (circle.label) {
						// 绘制文字：ID 显示在圆的正下方
						ctx.setFontSize(14); // 字体大小
						ctx.setFillStyle('white'); // 白色字体
						const text = String(circle.label); // 转成字符串

						// 获取文本宽度，用于居中显示
						const textWidth = ctx.measureText(text).width;

						// 文字画在圆的正下方，水平居中
						const textX = x - textWidth / 2; // 居中对齐
						const textY = y + circle.radius + 20; // 圆的半径下方再加一点间距

						ctx.fillText(text, textX, textY);
					}

				});
			},
			startRotation() {
				setInterval(() => {
					this.circles = this.circles.map(circle => ({
						...circle,
						angle: circle.angle + 0.005 // 增加一个小的角度来模拟公转
					}));
					const ctx = uni.createCanvasContext('myCanvas', this);
					this.drawCircles(ctx);
					ctx.draw();
				}, 30); // 每30ms更新一次
			},
			handleCanvasTap(e) {
				// const {
				// 	offsetX,
				// 	offsetY
				// } = e.mp; // 获取点击相对于canvas的坐标
				const offsetX = e.detail.x;
				const offsetY = e.detail.y;
				const centerX = this.width / 2;
				const centerY = this.width / 2;

				for (let circle of this.circles) {
					if (circle.hasOwnProperty('path')) {
						const x = centerX + circle.orbitRadius * Math.cos(circle.angle);
						const y = centerY + circle.orbitRadius * Math.sin(circle.angle);

						const dx = offsetX - x;
						const dy = offsetY - y - 40;
						const distance = Math.sqrt(dx * dx + dy * dy);

						// 相差不过10
						if (Math.abs(distance - circle.radius) < circle.radius) {
							this.$emit('circleTap', circle);
							this.init(); // 重新绘制
							break;
						}
					}
				}
			}

		}
	}
</script>

<style>

</style>